<template>

    <Form :model="formData">
      <FormItem label="功能名" label-position="top">
        <Input v-model="formData.name" placeholder="请输入功能名称" value="用户管理" disabled />
      </FormItem>

      <FormItem label="按钮名" label-position="top">
         <Input v-model="formData.btnName" placeholder="请输入按钮名称" />
      </FormItem>

      <FormItem label="权限标识" label-position="top">
        <Input v-model="formData.suffix" placeholder="请输入权限标识,例如 `add`, 会自动添加功能权限标识作为前缀">
          <template #prepend>
            <span>{{formData.remark}}</span>
          </template>
        </Input>
      </FormItem>

      <FormItem label="状态" label-position="top">
        <Switch size="large" v-model="formData.status">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
        </Switch>
      </FormItem>
    </Form>

</template>

<script>

export default {
  props: {
    funcRow: {
      type: Object,
      required: true
    }
  },
	data() {
		return {
			formData: this.funcRow
		}
	},
	methods: {
    clearFormData() {
       this.formData = {
         id: this.funcRow.id,
         name: '',
         btnName: '',
         remark: this.funcRow.remark,
         status: true,
         suffix: '',
       }
    }
	},
}
</script>

<style scoped>
.icon {
	vertical-align: middle;
	margin: 0 3px;;
}
</style>